<template>
  <FormTableLayout>
    <template #form>Menus</template>
    <template #tools>
      <el-button :icon="Plus" type="primary" size="small" plain @click="handleClickBtnAdd">新建</el-button>
    </template>
    <template #default>
      <el-table :data="tableData" row-key="menu_id" style="width: 100%" border scrollbar-always-on header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column prop="menu_name" label="菜单名称" width="230" />
        <el-table-column prop="menu_title" label="菜单标题名" width="180" />
        <el-table-column prop="route_path" label="路由路径" width="180" />
        <el-table-column prop="vue_file_path" label="Vue 文件路径" width="380" />
        <el-table-column />
        <el-table-column label="操作" width="230" header-align="right" align="right">
          <template #default="scope">
            <el-button v-if="scope.row.parent_menu_id === 0 || scope.row.parent_menu_id == null" type="success" :icon="Edit" @click="handleClickBtnAddSubMenu(scope.row)" size="small" link>添加子菜单</el-button>
            <el-button type="primary" :icon="Edit" @click="handleClickBtnEditMenu(scope.row)" size="small" link>编辑</el-button>
            <el-button type="danger" :icon="Delete" @click="handleClickBtnDeleteMenu(scope.row.menu_id)" size="small" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #other>
      <DrawersEdit ref="refDrawersEdit" @submited="handleDrawersEditSubmited" />
    </template>
  </FormTableLayout>
</template>
<script setup lang="ts">
import FormTableLayout from '@/layout/FormTableLayout.vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import DrawersEdit from './drawers/Edit.vue'
import Dal from '@/dal'

const refDrawersEdit = ref()
const tableData = ref([])

/**
 * 点击添加按钮时的处理函数
 * 此函数检查编辑抽屉组件的引用是否存在如果存在，则打开编辑抽屉，设置父菜单ID为0
 * 这是为了在添加新菜单或项目时，确保没有预设的父级关系
 */
const handleClickBtnAdd = () => {
  // 检查编辑抽屉组件的引用是否存在
  if (refDrawersEdit.value) {
    // 打开编辑抽屉，并设置初始的父菜单ID为0
    refDrawersEdit.value.open({ parent_menu_id: 0 }, { menu_title: '根目录' })
  }
}

// 编辑菜单
const handleClickBtnEditMenu = (menu: any) => {
  console.log(menu)
  // Object.assign(editMenuData, menu)
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open(menu)
  }
}

// 添加子菜单
const handleClickBtnAddSubMenu = (menu: any) => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open({ parent_menu_id: menu.menu_id }, menu)
  }
  // menuData.parent_menu_id = parentMenu.menu_id
  // dialogTitle.value = '新增菜单'
  // menuData.menu_id = null
  // menuData.menu_name = ''
  // menuData.menu_title = ''
  // menuData.route_path = ''
  // menuData.vue_file_path = ''
  // addMenuDrawerVisible.value = true
}

// 删除菜单
const handleClickBtnDeleteMenu = async (menuId: any) => {
  console.log(menuId)
  // try {
  //   await axios.delete(`/api/menus/${menuId}`)
  //   getMenus()
  // } catch (error) {
  //   console.error('删除菜单失败', error)
  // }
}

const handleDrawersEditSubmited = async () => {
  await initData()
}

const initData = async () => {
  const res = await Dal.Menus.findTree()
  tableData.value = res.data
}

onMounted(async () => {
  await initData()
})
</script>
